// 监测报警
<template>
    <f7-page
        ptr
        @ptr:refresh="refresh"
        infinite
        :infinite-distance="50"
        :infinite-preloader="true"
        @infinite="infinite"
        class="common-page"
    >
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>监测报警</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>
        <van-tabs @click="clickTab" v-model="tabName">
            <van-tab sticky name="alarm">
                <template #title>监测报警</template>
                <f7-list media-list class="search-list" v-if="query.data.length > 0">
                    <li
                        v-for="(item, index) in query.data"
                        :key="index"
                        class="content-box"
                    >
                        <img :src="require(`../../../../assets/img/qzjx/alarm-icon.png`)" class="left-box" />
                        <div class="right-box">
                            <div class="title-box">
                                <h3>{{ item.alarmTime }}</h3>
                            </div>
                            <p>{{ item.alarmContent || '--' }}</p>
                        </div>
                    </li>
                </f7-list>
                <v-empty v-else description="暂无数据"></v-empty>
            </van-tab>
            <van-tab sticky name="record">
                <template #title>处理记录</template>
                <f7-list media-list class="search-list" v-if="query$1.data.length > 0">
                    <li
                        v-for="(item, index) in query$1.data"
                        :key="index"
                        class="content-box"
                        style="display: block;"
                        @click="handleToProcess(item)"
                    >
                        <div class="right-box">
                            <div class="title-box">
                                <h3>{{ showTime1(item.beginAlarmTime) }}</h3>
                                <div class="tag tag-yellow">{{ item.pstatus | DictItem(controlData.alarmHandleStatusList) }}</div>
                            </div>
                        </div>
                        <div class="box-content text-overflow-one">{{ item.alarmContent || '--' }}</div>
                    </li>
                </f7-list>
                <v-empty v-else description="暂无数据"></v-empty>
            </van-tab>
        </van-tabs>
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model: ['/app/equipment/eqmRepair/getListModel', '/app/equipment/blackBoxAlarmHandle/getListModel'],
            query: [
                '/app/crane/monitor/queryTdAlarmList',
                '/app/equipment/blackBoxAlarmHandle/query',
            ],
        }
    }
    onInit() {
        if (this.$f7route.query.type && this.$f7route.query.type == 'SGSJJ') {
            this.urls.query[0] = '/crane/monitor/querySgsjjAlarmList'
        }
        this.setSearch('propertyId', this.$f7route.query.propertyId, 'list')
        this.setSearch("propertyId", this.$f7route.query.propertyId, "list$1")
    }

    onBeforeQuery(type, conditions, params) {}

    onAfterQuery(type, isSuccess, result) {
        if (type == 'form') {
        }
        return result
    }

    mixin() {
        return {
            data() {
                return {
                    tabName: 'alarm'
                }
            },
            methods: {
                showTime1(date) {
                    if (date) {
                        return formatter.formatDate(date, 'yyyy-MM-dd')
                    } else {
                        return '--'
                    }
                },
                clickTab() {
                    if (this.tabName == 'alarm') {
                        this.searchQuery(this.search, 'list')
                    } else {
                        this.searchQuery(this.search, 'list$1')
                    }
                },
                // 跳转到监测报警页
                handleToProcess(item) {
                    this.getWorkflowArgs({
                        formId: item.handleId,
                    }).then((rlt) => {
                        let url = ''
                        if (rlt.taskId) {
                            url = `${
                                rlt.mobileFormUrl
                            }?action=processEdit&taskId=${
                                rlt.taskId
                            }&assigneeId=${rlt.assigneeId}&appCode=${
                                rlt.appCode
                            }&version=${rlt.version}&formId=${
                                item.formId
                            }&_r=${new Date().getTime()}`
                        } else if (rlt.historyTaskId) {
                            url = `${
                                rlt.mobileFormUrl
                            }?action=processView&historyTaskId=${
                                rlt.historyTaskId
                            }&appCode=${rlt.appCode}&version=${
                                rlt.version
                            }&formId=${
                                item.formId
                            }&_r=${new Date().getTime()}&assigneeId=${
                                rlt.assigneeId
                            }`
                        } else {
                            this.$toast('无法获取应用的处理地址')
                        }
                        if (url) {
                            this.$f7router.navigate(url)
                        }
                    })
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
@{deep}.page-content{
    background: #F7F9FC;
}
.content-box{
    background: #FFFFFF;
    box-shadow: none;
}
.content-box .right-box p{
    font-size: 14px;
    margin-top: 8px;
}
.common-page @{deep}.van-tabs {
    .van-tabs__wrap {
        width: 100%;
        z-index: 99;
    }

    .van-tabs__line {
        width: 40px;
    }
}

.submit-btn {
    flex: 1;
    margin: 0 10px;
    border-radius: 24px;
}
.box-content {
    color: #61677A;
    margin-top: 2px;
    font-size: 14px;
}
</style>
